<template>
    <div ref="containerRef" class="movie-container">
        <div ref="vRef" class="video">
            <video ref="videoRef" controls>
                <source src="https://oa.avdsr.com/m3u8/wuchufengsheng/wuchufengsheng.m3u8" type="application/x-mpegURL" >
            </video>
        </div>

        <div class="control">
            <n-card size="medium">
                卡片内容
            </n-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { tryOnMounted } from '@vueuse/core';
import Hls from 'hls.js';
import { ref } from 'vue';

const videoRef = ref<HTMLVideoElement>();
const vRef = ref<HTMLDivElement>();
const containerRef = ref<HTMLDivElement>();

const loadMovie = () => {
    if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource('/m3u8/wuchufengsheng/wuchufengsheng.m3u8');
        hls.attachMedia(videoRef.value!);

        // hls.on(Hls.Events.MANIFEST_PARSED, () => {
        //     videoRef.value?.play();
        // })
    } else if (videoRef.value?.canPlayType('application/vnd.apple.mpegurl')) {
        videoRef.value.src = '/m3u8/wuchufengsheng/wuchufengsheng.m3u8';
        // videoRef.value?.addEventListener('canplay', () => {
        //     videoRef.value?.play();
        // })
    }
}

tryOnMounted(() => {
    // loadMovie();
})

</script>

<style lang="scss">
.movie-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;

    .video {
        width: 100%;
        height: calc(100% - 6rem);
        position: relative;

        video {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .control {
        width: 100%;
        height: 6rem;
        position: relative;
    }
}
</style>